<template>
  <Table
    ref="xrTable"
    :list-api="list"
    :status-api="status"
    :table-column="tableColumn"
    :page-config="pageConfig"
    :table-config="tableConfig"
    @open-view-form="openViewForm"
    @open-edit-form="openEditForm"
  >
    <template #addBtn>
      <el-button type="success" @click="openCreateForm()">新增</el-button>
    </template>
  </Table>

  <el-dialog v-model="dialogFormVisible" :title="isRead ? '查看' : '新增'" width="860">
    <Form
      ref="xrForm"
      @remote-method="remoteMethod"
      @validator-rules="validatorRules"
      :table-column="tableColumn"
      :form-data="form"
      :is-read="isRead"
    />
    <template v-if="!isRead" #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm()"> 保存 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElForm, ElInput, ElRow, ElCol, ElFormItem, ElButton, ElDialog } from 'element-plus'
import { tableColumn as tableColumns, pageConfig, tableConfig } from './config'
import Table from '/src/components/Tablenew/index.vue'
import Form from '/src/components/Formnew/index.vue'
import { list, update, create, status } from '/src/api/drug/drugFearBack'
import { ref, nextTick, onMounted, reactive } from 'vue'
const dialogFormVisible = ref(false)
const isRead = ref(false)
const form = ref({
  status: 1
})
const xrForm = ref()
const xrTable = ref()
const tableColumn = reactive([...tableColumns])

const openCreateForm = () => {
  isRead.value = false
  dialogFormVisible.value = true

  nextTick(() => {
    form.value = { type: 1 }
    xrForm.value.ruleFormRef.resetFields()
    xrForm.value.ruleFormRef.clearValidate()
  })
}
const openViewForm = (row) => {
  isRead.value = true
  dialogFormVisible.value = true
  form.value = { ...row }
  nextTick(() => {
    xrForm.value.ruleFormRef.clearValidate()
  })
}
const openEditForm = (row) => {
  isRead.value = false
  dialogFormVisible.value = true
  form.value = { ...row }
  nextTick(() => {
    xrForm.value.ruleFormRef.clearValidate()
    xrForm.value.buildFormSelData()
  })
}

const remoteMethod = async (query, f) => {
  for (const i in tableColumn) {
    if (tableColumn[i].prop === f.prop) {
      const options = f.selectRemoteOptions || {}
      options[f.selectRemoteKey] = query
      const res = await f.asyncSelDataApi(options)
      f.asyncSelData = res.data
      tableColumn.splice(i, 1, f)
    }
  }
}

const validatorRules = (prop, rule, value, callback) => {
  switch (prop) {
    case 'other_id':
      if (value === form.value.drug_id) {
        callback(new Error('不能选同一个药!'))
      } else {
        callback()
      }
      break
    default:
      break
  }
}

const submitForm = async () => {
  console.log(xrForm.value.ruleFormRef)
  if (!xrForm.value.ruleFormRef) return
  await xrForm.value.ruleFormRef.validate(async (valid, fields) => {
    console.log(valid)
    if (valid) {
      const options = { ...form.value }
      delete options.name
      delete options.other_name
      if (options.id) {
        await update(options)
      } else {
        await create(options)
      }
      dialogFormVisible.value = false
      xrTable.value.resetFormParent()
      await buildFormSelData()
    } else {
      console.log('error submit!', fields)
    }
  })
}

const buildFormSelData = async () => {
  for (const column of tableColumn.filter((item) => item.isForm)) {
    if (column.asyncSelDataApi) {
      const res = await column.asyncSelDataApi()
      column.asyncSelData = res.data
    }
  }
}

onMounted(async () => {
  await buildFormSelData()
})
</script>

<style lang="less" scoped></style>
